<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modal</title>
    <script src="../node_modules/angular/angular.js"></script>
    <link href="../node_modules/angular/angular-csp.css" rel="stylesheet" />
    <script src="../node_modules/angular-touch/angular-touch.js"></script>
    <script src="../node_modules/angular-animate/angular-animate.js"></script>
    <link
      href="../node_modules/bootstrap/dist/css/bootstrap.css"
      rel="stylesheet"
    />
    <link
      href="../node_modules/bootstrap/dist/css/bootstrap-theme.css"
      rel="stylesheet"
    />
    <script src="../node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
    <link
      href="../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css"
      rel="stylesheet"
    />
    <script src="../node_modules/jquery/dist/jquery.js"></script>
  </head>

  <body>
    <script>
      var stackedModal = /* html */ `<div class="modal-header">
                <h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
            </div>
            <div class="modal-body" id="modal-body-{{name}}">
                Having multiple modals open at once is probably bad UX but it's technically possible.
            </div>`;
      var myModalContent = /* html */ `<div class="modal-header">
                <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
            </div>
            <div class="modal-body" id="modal-body">
                <ul>
                    <li ng-repeat="item in $ctrl.items">
                        <a href={javascript:void(0)} ng-click="$ctrl.selected.item = item">{{ item }}</a>
                    </li>
                </ul>
                Selected: <b>{{ $ctrl.selected.item }}</b>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
                <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
            </div>`;
      angular.module("ui.bootstrap.demo", [
        "ngAnimate",
        "ngSanitize",
        "ui.bootstrap",
      ]);
      angular
        .module("ui.bootstrap.demo")
        .controller("ModalDemoCtrl", function ($uibModal, $log, $document) {
          var $ctrl = this;
          $ctrl.items = ["item1", "item2", "item3"];

          $ctrl.animationsEnabled = true;

          $ctrl.open = function (size, parentSelector) {
            var parentElem = parentSelector
              ? $(
                  $document[0].querySelector(".modal-demo " + parentSelector),
                )
              : undefined;
            var modalInstance = $uibModal.open({
              animation: $ctrl.animationsEnabled,
              ariaLabelledBy: "modal-title",
              ariaDescribedBy: "modal-body",
              template: myModalContent,
              controller: "ModalInstanceCtrl",
              controllerAs: "$ctrl",
              size: size,
              appendTo: parentElem,
              resolve: {
                items: function () {
                  return $ctrl.items;
                },
              },
            });

            modalInstance.result.then(
              function (selectedItem) {
                $ctrl.selected = selectedItem;
              },
              function () {
                $log.info("Modal dismissed at: " + new Date());
              },
            );
          };

          $ctrl.openComponentModal = function () {
            var modalInstance = $uibModal.open({
              animation: $ctrl.animationsEnabled,
              component: "modalComponent",
              resolve: {
                items: function () {
                  return $ctrl.items;
                },
              },
            });

            modalInstance.result.then(
              function (selectedItem) {
                $ctrl.selected = selectedItem;
              },
              function () {
                $log.info("modal-component dismissed at: " + new Date());
              },
            );
          };

          $ctrl.openMultipleModals = function () {
            $uibModal.open({
              animation: $ctrl.animationsEnabled,
              ariaLabelledBy: "modal-title-bottom",
              ariaDescribedBy: "modal-body-bottom",
              template: stackedModal,
              size: "sm",
              controller: function ($scope) {
                $scope.name = "bottom";
              },
            });

            $uibModal.open({
              animation: $ctrl.animationsEnabled,
              ariaLabelledBy: "modal-title-top",
              ariaDescribedBy: "modal-body-top",
              template: stackedModal,
              size: "sm",
              controller: function ($scope) {
                $scope.name = "top";
              },
            });
          };

          $ctrl.toggleAnimation = function () {
            $ctrl.animationsEnabled = !$ctrl.animationsEnabled;
          };
        });

      // Please note that $uibModalInstance represents a modal window (instance) dependency.
      // It is not the same as the $uibModal service used above.

      angular
        .module("ui.bootstrap.demo")
        .controller("ModalInstanceCtrl", function ($uibModalInstance, items) {
          var $ctrl = this;
          $ctrl.items = items;
          $ctrl.selected = {
            item: $ctrl.items[0],
          };

          $ctrl.ok = function () {
            $uibModalInstance.close($ctrl.selected.item);
          };

          $ctrl.cancel = function () {
            $uibModalInstance.dismiss("cancel");
          };
        });

      // Please note that the close and dismiss bindings are from $uibModalInstance.

      angular.module("ui.bootstrap.demo").component("modalComponent", {
        template: myModalContent,
        bindings: {
          resolve: "<",
          close: "&",
          dismiss: "&",
        },
        controller: function () {
          var $ctrl = this;

          $ctrl.$onInit = function () {
            $ctrl.items = $ctrl.resolve.items;
            $ctrl.selected = {
              item: $ctrl.items[0],
            };
          };

          $ctrl.ok = function () {
            $ctrl.close({ $value: $ctrl.selected.item });
          };

          $ctrl.cancel = function () {
            $ctrl.dismiss({ $value: "cancel" });
          };
        },
      });
    </script>
    <div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
      <button type="button" class="btn btn-default" ng-click="$ctrl.open()">
        Open me!
      </button>
      <button type="button" class="btn btn-default" ng-click="$ctrl.open('lg')">
        Large modal
      </button>
      <button type="button" class="btn btn-default" ng-click="$ctrl.open('sm')">
        Small modal
      </button>
      <button
        type="button"
        class="btn btn-default"
        ng-click="$ctrl.open('sm', '.modal-parent')"
      >
        Modal appended to a custom parent
      </button>
      <button
        type="button"
        class="btn btn-default"
        ng-click="$ctrl.toggleAnimation()"
      >
        Toggle Animation ({{ $ctrl.animationsEnabled }})
      </button>
      <button
        type="button"
        class="btn btn-default"
        ng-click="$ctrl.openComponentModal()"
      >
        Open a component modal!
      </button>
      <button
        type="button"
        class="btn btn-default"
        ng-click="$ctrl.openMultipleModals()"
      >
        Open multiple modals at once
      </button>
      <div ng-show="$ctrl.selected">
        Selection from a modal: {{ $ctrl.selected }}
      </div>
      <div class="modal-parent"></div>
    </div>
  </body>
</html>
